<!-- 题库编辑弹窗 -->
<template>
  <el-dialog
    width="750px"
    :visible="visible"
    :lock-scroll="false"
    :destroy-on-close="true"
    custom-class="ele-dialog-form"
    :title="isUpdate ? '修改题库信息' : '添加题库信息'"
    @update:visible="updateVisible"
  >
    <el-form ref="form" :model="form" :rules="rules" label-width="82px">
      <el-form-item label="题干信息:" prop="title">
        <el-input
          clearable
          :maxlength="20"
          v-model="form.title"
          placeholder="请输入题干信息"
        />
      </el-form-item>
      <el-form-item label="所属题库:" prop="topic_id">
        <el-select
          v-model="form.topic_id"
          clearable
          filterable
          placeholder="请选择所属题库"
          @change="selectPrescriptionChange"
        >
          <el-option
            v-for="item in topicOption"
            :key="item.id"
            :label="item.title"
            :value="item.id"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="所属处方:" prop="prescription_id">
        <el-select
          v-model="form.prescription_id"
          clearable
          filterable
          placeholder="请选择所属处方"
        >
          <el-option
            v-for="item in prescriptOption"
            :key="item.id"
            :label="item.title"
            :value="item.id"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="题目分值:" prop="score">
        <el-input-number
          clearable
          :maxlength="20"
          v-model="form.score"
          controls-position="right"
          :min="1"
          placeholder="请输入题目分值"
        />
      </el-form-item>
      <el-form-item label="正确答案:" prop="right_key">
        <el-input
          clearable
          :maxlength="20"
          v-model="form.right_key"
          placeholder="请输入正确答案"
        />
      </el-form-item>
      <el-form-item label="题目状态:" prop="status">
        <el-radio-group v-model="form.status" size="mini">
          <!-- 状态：1 为 启用，2 停用 出库 3为 停用-->
          <el-radio-button :label="1">启用</el-radio-button>
          <el-radio-button :label="2">停用</el-radio-button>
        </el-radio-group>
      </el-form-item>
    </el-form>
    <div slot="footer">
      <el-button @click="updateVisible(false)">取消 </el-button>
      <el-button type="primary" :loading="loading" @click="save"
        >保存
      </el-button>
    </div>
  </el-dialog>
</template>

<script>
import uploadImage from "@/components/uploadImage";
export default {
  name: "TrainEdit",
  props: {
    // 弹窗是否打开
    visible: Boolean,
    // 修改回显的数据
    data: Object,
  },
  components: { uploadImage },
  data() {
    return {
      fileLoading: false, // 文件上传loading
      prescriptOption: [],
      fileList: [],
      topicOption: [],
      // 表单数据
      form: Object.assign({ status: 1, type: 1 }, this.data),
      // 表单验证规则
      rules: {
        title: [{ required: true, message: "请输入题干信息", trigger: "blur" }],
        score: [{ required: true, message: "请输入题目分值", trigger: "blur" }],
        right_key: [
          { required: true, message: "请输入正确答案", trigger: "blur" },
        ],
        topic_id: [{ required: true, message: "请选择题库", trigger: "blur" }],
        prescription_id: [
          { required: true, message: "请选择处方", trigger: "blur" },
        ],
        status: [{ required: true, message: "请选择状态", trigger: "blur" }],
      },
      // 提交状态
      loading: false,
      // 是否是修改
      isUpdate: false,
    };
  },
  watch: {
    data() {
      if (this.data) {
        this.form = Object.assign({}, this.data, {
          // 清空密码
          password: "",
        });
        // 取值赋予城市组件
        this.topicList();
        this.selectPrescription();
        this.isUpdate = true;
      } else {
        this.form = {};
        this.isUpdate = false;
        // 清空省市区控件
        this.city = [];
      }
    },
  },
  mounted() {},
  // 页面创建时
  created() {
    this.topicList();
    this.selectPrescription();
  },
  methods: {
    selectPrescriptionChange() {
      this.form.prescription_id = "";
      this.selectPrescription();
    },
    // 下载模版
    handleDownload() {
      window.location.href = "./excel/题目模板.xlsx";
    },
    // 上传到本地
    uploadChange(file, fileList) {
      this.form.file = file.raw;
    },
    /* 获取题库列表 */
    topicList() {
      this.$http
        .get("/topic/getTrainTopicSelectList")
        .then((res) => {
          if (res.data.code === 0) {
            this.topicOption = res.data.data;
          }
        })
        .catch((e) => {
          this.$message.error(e.message);
        });
    },
    // 筛选处方
    selectPrescription() {
      this.prescriptOption = [];
      this.$http
        .post("/prescription/getPrescriptionSelectList", {
          topic_id: this.form.topic_id,
          type: 2,
        })
        .then((res) => {
          if (res.data.code === 0) {
            this.prescriptOption = res.data.data;
          }
        })
        .catch((e) => {
          this.$message.error(e.message);
        });
    },
    /* 保存编辑 */
    save() {
      this.$refs["form"].validate((valid) => {
        if (valid) {
          this.loading = true;
          // 城市数据处理
          this.form = Object.assign({}, this.form, {
            city: this.city,
          });
          this.$http
            .post("/train/edit", this.form)
            .then((res) => {
              this.loading = false;
              if (res.data.code === 0) {
                this.$message({ type: "success", message: res.data.msg });
                if (!this.isUpdate) {
                  this.form = {};
                }
                this.updateVisible(false);
                this.$emit("done");
              } else {
                this.$message.error(res.data.msg);
              }
            })
            .catch((e) => {
              this.loading = false;
              this.$message.error(e.message);
            });
        } else {
          return false;
        }
      });
    },
    /* 更新visible */
    updateVisible(value) {
      this.$emit("update:visible", value);
    },
  },
};
</script>

<style scoped></style>
